<template>
    <div id="map">

    </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { app } from '@/main';
import mapboxgl from 'mapbox-gl'
mapboxgl.accessToken = import.meta.env.VITE_TOKEN
onMounted(() => {
    const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v12',
        center: [114.30, 30.50],
        zoom: 2,
    });

    setTimeout(() => {
        map.flyTo({
            center: [114.30, 30.50],
            zoom: 12,
            // 飞行速度  0-1  越大 飞的越快
            speed: 0.6
        })
    }, 2000)


    var imageLists = [
        '/src/assets/image/warn.jpg',
        '/src/assets/image/police.png',
        '/src/assets/image/danger.jpg'
    ]

    imageLists.forEach(function (path, index) {
        map.loadImage(path, function (error, image) {
            if (error) throw error;

            // 给每张图片添加一个唯一的名称
            var imageName = 'custom-icon-' + index;

            // 添加图片到地图
            map.addImage(imageName, image);

            // 在这里你可以做其他的事情，例如将图像用作标记等
        });
    });


    const { Scene, Mapbox } = L7
    const scene = new Scene({
        id: "map",
        map: new Mapbox({
            mapInstance: map,
        }),
        // 隐藏logo
        logoVisible: false,
    })
    // 设置全局变量
    app.provide('$map', map)
    app.provide('$scene', scene)
    // app.config.globalProperties._map = map
})
</script>

<style scoped lang="scss">
#map {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
}
</style>
